<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=windows-1251"/>
	<title>EditField Demo Page</title>
	<script type="text/javascript" src="../../core/lib/html.js"></script>
	<script type="text/javascript" src="../../core/lib/jspath.js"></script>
	<script type="text/javascript" src="../../core/lib/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="../../core/cdk.js"></script>
	<script type="text/javascript" src="../../core/editor.js"></script>
	<script type="text/javascript" src="../../core/textEditor.js"></script>
	<script type="text/javascript" src="../../core/defaultView.js"></script>
	
	<link rel="stylesheet" type="text/css" href="../../core/defaultView.css"/>
	<link rel="stylesheet" type="text/css" href="../../styles.css"/>
	
	<script type="text/javascript" src="../../core/lib/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../../core/lib/jquery-ui-1.10.2.custom/css/smoothness/jquery-ui-1.10.2.custom.css"/>
	
	<script type="text/javascript" src="../browserSupport.js"></script>
	
	<script type="text/javascript" src="editField.js"></script>
	<link rel="stylesheet" type="text/css" href="editField.css"/>
	
	<link rel="stylesheet" type="text/css" href="../button/theme/button.css"/>
	<script type="text/javascript" src="../button/button.js"></script>
	
	<style type="text/css">
		.button{margin-left:3px;}
	</style>
	
	<script type="text/javascript">
		var doc = {
			items: [
				{name:"item 1", tags:"test;editor;module"},
				{name:"item 2", tags:"editor;view;module"},
				{name:"item 3", tags:"test;editor;module"},
				{name:"item 4", tags:"module;manual"},
				{name:"item 5", tags:"test;development;library"},
				{name:"item 6", tags:"manual;editor;library"}
			]
		};
		
		function displayDoc(doc){
			function template(){with(Html){
				return div(
					apply(doc.items, function(itm, i){
						return div(
							span({"class":"attrField", path:"items/#"+i+"/name"}, itm.name)
						);
					})
				);
			}}
			
			$("#viewPanel1").html(template());
			$("#viewPanel1 .attrField").editField(doc, "html");
			
			$("#viewPanel2").html(template());
			$("#viewPanel2 .attrField").editField(doc, "text");
			
			$("#viewPanel3").html(template());
			$("#viewPanel3 .attrField").editField(doc, "icon");
		}
		
		$.fn.button.nullImage = "../button/null.gif";
		
		$(function(){
			displayDoc(doc);
			$("#support").browserSupport();
		});
	</script>
</head>
<body>
	<h1>EditField Demo Page</h1>
	<table width="100%">
		<tr>
			<td valign="top" width="33%"><div id="viewPanel1"></div></td>
			<td valign="top" width="33%"><div id="viewPanel2"></div></td>
			<td valign="top" width="33%"><div id="viewPanel3"></div></td>
		</tr>
	</table>
	
	<div id="support"></div>
	
</body>
</html>